<!--人员网格-->
<template>
  <view
    class="container page-container"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <view
      style="
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: #fff;
      "
    >
      <view
        @click="onShowRegionDialog"
        style="
          height: 40px;
          margin-top: 1px;
          flex: 1;
          background-color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        "
      >
        <text style="color: #0da863; font-size: 16px" v-if="!isCountyAccount">{{
          currRegion.region_name
        }}</text>
        <image
          src="@/static/icon/ic_down_arrow.png"
          v-if="!isCountyAccount"
          style="height: 6px; width: 10px; margin-left: 10px"
        />
      </view>
      <van-checkbox
        v-if="showCheckGrids"
        style="margin-right: 19px"
        shape="square"
        :value="checkGrids"
        @change="onChange"
        checked-color="#0DA863"
        icon-size="16px"
      >
        网格
      </van-checkbox>
    </view>

    <map
      id="map1"
      ref="map1"
      :show-location="false"
      :longitude="lon"
      :latitude="lat"
      :scale="10"
      :style="{ height: mapHeight + 'px', width: screenWidth + 'px' }"
      :polygons="polygons"
      :markers="markers"
      @markertap="onmarkertap"
    >
      <!--整改销账 、保障工作、网格列表布局-->
      <cover-view
        class="mapTopContainer"
        style="width: 100%; z-index: 100"
        v-if="showListBoutton"
      >
        <cover-view
          v-if="isCountyAccount"
          style="
            width: 90%;
            flex-direction: row;
            display: flex;
            justify-content: space-between;
            align-content: space-between;
          "
        >
          <cover-view
            style="
              margin-bottom: 16px;
              width: 78px;
              align-items: center;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: white;
              box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
              border-radius: 4px;
            "
            @click="clickItem(ButtonType.ModifyWriteOff)"
          >
            <cover-view
              style="
                margin-top: 12px;
                margin-bottom: 12px;
                font-size: 14px;
                text-align: center;
                color: #737373;
              "
              >整改销账
            </cover-view>
            <cover-view
              style="
                height: 5px;
                width: 5px;
                background-color: red;
                border-radius: 50%;
                margin-bottom: 20px;
              "
              v-if="hasModifyData"
            />
          </cover-view>
          <cover-view
            @click="onClickRefresh"
            style="
              margin-bottom: 16px;
              width: 78px;
              align-items: center;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: white;
              box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
              border-radius: 4px;
            "
          >
            <cover-image
              src="../../static/icon/ic_map_refresh.png"
              style="width: 14px; height: 13px; margin-right: 5px"
            ></cover-image>
            <cover-view
              style="
                margin-top: 12px;
                margin-bottom: 12px;
                font-size: 14px;
                text-align: center;
                color: #737373;
              "
              >刷新</cover-view
            >
          </cover-view>
        </cover-view>
        <cover-view
          style="
            width: 90%;
            flex-direction: row;
            display: flex;
            justify-content: space-between;
            align-content: space-between;
          "
        >
          <cover-view
            style="
              margin-bottom: 16px;
              width: 78px;
              align-items: center;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: white;
              box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
              border-radius: 4px;
            "
            @click="clickItem(ButtonType.ProtectionWork)"
          >
            <cover-view
              style="
                margin-top: 12px;
                margin-bottom: 12px;
                font-size: 14px;
                text-align: center;
                color: #737373;
              "
              >保障工作
            </cover-view>
            <cover-view
              v-if="hasWorkData"
              style="
                height: 5px;
                width: 5px;
                background-color: red;
                border-radius: 50%;
                margin-bottom: 20px;
              "
            />
          </cover-view>
          <cover-view
            v-if="!isCountyAccount"
            @click="onClickRefresh"
            style="
              margin-bottom: 16px;
              width: 78px;
              align-items: center;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: white;
              box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
              border-radius: 4px;
            "
          >
            <cover-image
              src="../../static/icon/ic_map_refresh.png"
              style="width: 14px; height: 13px; margin-right: 5px"
            ></cover-image>
            <cover-view
              style="
                margin-top: 12px;
                margin-bottom: 12px;
                font-size: 14px;
                text-align: center;
                color: #737373;
              "
              >刷新</cover-view
            >
          </cover-view>
        </cover-view>

        <cover-view
          style="
            margin-bottom: 16px;
            width: 78px;
            padding-top: 12px;
            padding-bottom: 12px;
            align-items: center;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
            border-radius: 4px;
            font-size: 14px;
            text-align: center;
            color: #737373;
          "
          @click="clickItem(ButtonType.GridList)"
        >
          网格列表
        </cover-view>
      </cover-view>
      <!--底部网格统计-->
      <cover-view
        v-if="showGridStatistic"
        style="
          position: absolute;
          bottom: 0;
          width: 100%;
          box-sizing: border-box;
          padding-left: 10px;
          padding-right: 10px;
        "
      >
        <cover-view
          style="
            border-radius: 10px;
            background: #ffffff;
            box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
            min-height: 142px;
            width: 100%;
            box-sizing: border-box;
            flex-direction: column;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
          "
        >
          <cover-view
            style="
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              width: 100%;
            "
          >
            <cover-view
              style="margin: 15px; flex: 1; font-size: 18px; font-weight: bold"
              >{{ currRegion?.region_name }}</cover-view
            >
            <cover-image
              src="../../static/icon/ic_grid_colse.png"
              style="
                height: 16px;
                width: 16px;
                margin-right: 10px;
                margin-bottom: 10px;
              "
              @click="closeGridCard"
            ></cover-image>
          </cover-view>
          <cover-view
            style="
              width: 95%;
              flex-direction: row;
              display: flex;
              margin-bottom: 26px;
              margin-top: 20px;
              justify-content: center;
              align-items: center;
            "
          >
            <cover-view
              style="
                flex: 1;
                flex-direction: column;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <cover-view
                style="
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  text-align: center;
                  font-size: 13px;
                  color: #414141;
                "
                >点位总数</cover-view
              >
              <cover-view
                style="
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  font-size: 13px;
                  text-align: center;
                  color: #27afaf;
                  font-weight: bold;
                  margin-top: 3px;
                "
                >{{ currRegionCount?.point_count }}</cover-view
              >
            </cover-view>
            <cover-view
              style="
                flex: 1;
                flex-direction: column;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <cover-view
                style="
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  font-size: 13px;
                  color: #414141;
                  text-align: center;
                "
                >网格数</cover-view
              >
              <cover-view
                style="
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  font-size: 13px;
                  color: #427eff;
                  font-weight: bold;
                  margin-top: 3px;
                  text-align: center;
                "
                >{{ currRegionCount?.grid_count }}</cover-view
              >
            </cover-view>
            <cover-view
              style="
                flex: 1;
                flex-direction: column;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <cover-view
                style="
                  font-size: 13px;
                  color: #414141;
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  text-align: center;
                "
                >督查数</cover-view
              >
              <cover-view
                style="
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  font-size: 13px;
                  color: #0da863;
                  font-weight: bold;
                  margin-top: 3px;
                  text-align: center;
                "
                >{{ currRegionCount?.problem_count }}</cover-view
              >
            </cover-view>
            <cover-view
              style="
                flex: 1;
                flex-direction: column;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <cover-view
                style="
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  font-size: 13px;
                  color: #414141;
                  text-align: center;
                "
                >待整改数</cover-view
              >
              <cover-view
                style="
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  font-size: 13px;
                  color: #d93838;
                  font-weight: bold;
                  margin-top: 3px;
                  text-align: center;
                "
                >{{ currRegionCount?.reform_count }}</cover-view
              >
            </cover-view>
            <cover-view
              style="
                flex: 1;
                flex-direction: column;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <cover-view
                style="
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  font-size: 13px;
                  color: #414141;
                  text-align: center;
                "
                >整改率</cover-view
              >
              <cover-view
                style="
                  width: 100%;
                  white-space: normal;
                  word-wrap: break-word;
                  font-size: 13px;
                  color: #ed9325;
                  font-weight: bold;
                  margin-top: 3px;
                  text-align: center;
                "
                >{{ currRegionCount?.reformed_rate }}%</cover-view
              >
            </cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </map>
  </view>
  <van-popup
    :show="show"
    round
    position="top"
    safe-area-inset-top="true"
    :z-index="99999"
    custom-style="height: 50%;background-color: #efefef"
    @close="onClose"
  >
    <scroll-view scroll-y>
      <template v-for="item in regionDataList" :key="item">
        <view
          @click="onSelectItem(item)"
          style="
            background-color: #fff;
            margin-top: 1px;
            height: 40px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding-left: 10px;
            padding-left: 10px;
          "
        >
          <text
            :style="{
              'font-size': '14px',
              color:
                currRegion.region_name === item.region_name
                  ? '#0DA863'
                  : '#737373',
            }"
            >{{ item.region_name }}</text
          >
        </view>
      </template>
    </scroll-view>
  </van-popup>
  <van-dialog
    use-slot
    :show="showOperationUserDailog"
    use-confirm-button-slot="false"
  >
    <view class="userDilogContainer">
      <text
        style="width: 100%; text-align: end; color: #737373; font-size: 14px"
        @click="onCloseUserDialog"
        >关闭</text
      >
      <text class="userName">{{ userData?.full_name }} </text>
      <text class="phoneNumber"> 电话号码：{{ userData?.phone }}</text>
      <!-- <text class="phoneNumber"> 所属网格：{{ userData?.grid?.grid_name }}</text> -->
      <text class="phoneNumber">
        主要负责网格：{{ userData?.grid?.main_grid }}</text
      >
      <text class="phoneNumber">
        专项负责网格：{{ userData?.grid?.special_grid }}</text
      >
      <view class="bottomButtonContainer">
        <text
          style="
            text-align: center;
            padding-top: 6px;
            padding-bottom: 6px;
            width: 80px;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            color: #ffffff;
            font-size: 14px;
            background: #396fc5;
            justify-content: center;
            align-items: center;
          "
          @click="jumpWorkPage"
          >工作情况</text
        >
        <text
          style="
            text-align: center;
            padding-top: 6px;
            padding-bottom: 6px;
            width: 80px;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            color: #ffffff;
            font-size: 14px;
            background: #0da863;
            margin-left: 24px;
            justify-content: center;
            align-items: center;
          "
          @click="jumpOrbitPage"
          >人员轨迹</text
        >
      </view>
    </view>
  </van-dialog>
</template>

<script setup lang="ts">
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import {
  getPtInPoly,
  getAllPolygonsData,
  bMapTransqqMap,
} from "@/utils/map-utlis";
let QQMapWX = require("../../static/js/qqmap-wx-jssdk.js");
import {
  getCitys,
  regionUserEntityList,
  allUserEntityList,
  regionList,
  reformCount,
  securities,
  regionCount,
  singleGridGPS,
} from "@/api/common";
import type {
  CityData,
  UserEntityData,
  UserData,
  RegionListData,
  RegionCountData,
} from "@/api/bean/PageListWrap";
import { MapTip, UserTip } from "@/utils/constants";
import { jumpOrbit } from "@/subpackages/zutils/zrouter";
import { saveUserCityCode } from "@/utils/account";
//所有覆盖物
const polygons = ref<[]>();
//网格覆盖物
const gridPolygons = ref<[]>();
//全部覆盖物
let allRegionPolygons = ref<[]>();
//下拉列表
let regionDataList = ref<[]>();
//当前选择区县
let currRegion = ref<{}>({
  id: -1,
  region_name: "全部",
});
//经纬度
let lat = ref<number>(30.663467);
let lon = ref<number>(104.07231);
let markers = ref<[]>();
let currCity = ref<CityData>();
let show = ref(false);
let showListBoutton = ref(true);
//页面高度
let mapHeight = ref(0);
let screenWidth = ref(0);
let screenHeight = ref(0);
let userData = ref<UserData>();
//网格
let checkGrids = ref<boolean>(false);
let showGridStatistic = ref<boolean>(false);
let showCheckGrids = ref<boolean>(false);
let currRegionCount = ref<RegionCountData>({
  point_count: 0,
  grid_count: 0,
  problem_count: 0,
  reformed_count: 0,
  reformed_rate: 0,
  reform_count: 0,
});
//是否展示整改销账按钮
let isCountyAccount = ref<boolean>(false);
let hasModifyData = ref<boolean>(false);
let hasWorkData = ref<boolean>(false);
//展示操作人员按钮
let showOperationUserDailog = ref<boolean>(false);
let qqmapsdk = new QQMapWX({
  key: MapTip.QQ_MAP_KEY,
});
let _mapContext = null;
onReady(() => {
  _mapContext = uni.createMapContext("map1", this);
  _mapContext.initMarkerCluster({
    enableDefaultStyle: false, // 是否启用默认的聚合样式(是否用自定义图标)
    zoomOnClick: false,
    gridSize: 0,
    complete(res) {},
  });
});
const onShowRegionDialog = () => {
  if (isCountyAccount.value) return;
  show.value = true;
  showListBoutton.value = false;
};
const onClose = () => {
  show.value = false;
  showListBoutton.value = true;
};
function closeGridCard() {
  showGridStatistic.value = false;
}

let currAccountCountyId: number = 0;
//底部容器高度
onLoad((options) => {
  let json = uni.getStorageSync(UserTip.USER_DATA);
  let { user_type, region_id } = JSON.parse(json) as {
    user_type: number;
    region_id: number;
  };
  isCountyAccount.value = user_type !== 1;
  currAccountCountyId = region_id;
  uni.getSystemInfo({
    success: (result) => {
      const height = result.screenHeight - 180;
      const width = result.screenWidth;
      mapHeight.value = height;
      screenHeight.value = result.screenHeight;
      screenWidth.value = width;
    },
    fail: (error) => {},
  });
  if (isCountyAccount.value) {
    checkGrids.value = true;
  }
  startLocation();
});
function onClickRefresh() {
  loadData();
}
onShow(() => {
  loadData();
});
type statisticalData = {
  reform_count: number; // 归口下待整改
  reformed_count: number; // 归口下已整改
  update_time: string; // 统计更新时间
  my_reform_count: number; // 我的待整改
  my_reformed_count: number; // 我的已整改
};
//待整改、保障工作红点数据
async function loadOtherCountData() {
  if (isCountyAccount.value === true) {
    let statisticalDataResult = (await reformCount()) as statisticalData;
    hasModifyData.value = statisticalDataResult.my_reform_count != 0;
  }
  let securitiesData = (await securities()) as [];
  hasWorkData.value = securitiesData.length != 0;
}
const onChange = (event) => {
  checkGrids.value = event.detail;
  if (checkGrids.value) {
    loadGridRegionData();
  } else {
    loadData();
  }
};
async function loadGridRegionData() {
  //获取区县网格底部卡片数据
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  // console.log(currRegion.value);
  currRegionCount.value = (await regionCount(
    currRegion.value.id
  )) as RegionCountData;
  let singleGridGPSResults = (await singleGridGPS(currRegion.value.id)) as [];
  let gps = singleGridGPSResults.map((data) => {
    let tempGps = (data.gps as []).map((gpsData) => {
      let { lat, lng } = bMapTransqqMap(gpsData[0], gpsData[1]) as {
        lat: number;
        lng: number;
      };
      return {
        latitude: lat,
        longitude: lng,
      };
    });
    return {
      points: tempGps,
      fillColor: "#C2E9F8B3",
      strokeWidth: 3,
      strokeColor: "#00C8EC",
      level: "abovebuildings",
      region_id: currRegion.value.id,
      region_name: currRegion.value.region_name,
    };
  });
  polygons.value = gps as [];
}
//地图点击
const maptap = (e: any) => {
  setTimeout(() => {
    if (showOperationUserDailog.value === true) return;
    loadIsPtInPoly(e);
  }, 1000);
};
//获取覆盖物数据
async function loadIsPtInPoly(e: any) {
  const { latitude, longitude } = e.detail;

  const { region_id, region_name } = (await getPtInPoly(
    latitude,
    longitude,
    polygons.value
  )) as { region_id: number; region_name: string };
  uni.navigateTo({
    url:
      "/subpackages/personnel-grid/personnelGrid?region_id=" +
      region_id +
      "&&latitude=" +
      latitude +
      "&&longitude=" +
      longitude +
      "&&name=" +
      region_name,
  });
}
//选择区县
const onSelectItem = (item) => {
  show.value = false;
  showListBoutton.value = true;
  if (item.id === currRegion.value.id) return;
  currRegion.value = item;
  clearCheckGridState();
  userData.value = null;
  polygons.value = [];
  allRegionPolygons.value = [];
  markers.value = [];
  onClickRefresh();
};
let tempShowGridStatistic = false;
//点击人员
const onmarkertap = (e: any) => {
  tempShowGridStatistic = showGridStatistic.value;
  let markerData = markers.value?.filter((item) => item.id === e.markerId)[0];
  userData.value = markerData.userData as UserData;
  showOperationUserDailog.value = true;
  showListBoutton.value = false;
  showGridStatistic.value = false;
};
//人员信息弹窗关闭
const onCloseUserDialog = () => {
  showOperationUserDailog.value = false;
  showListBoutton.value = true;
  showGridStatistic.value = tempShowGridStatistic;
};
const jumpWorkPage = () => {
  uni.navigateTo({
    url: "/subpackages/work/workPage?userId=" + userData?.value?.id,
  });
};
//定位
function startLocation() {
  uni.getLocation({
    type: "gcj02",
    isHighAccuracy: true,
    success: (res) => {
      let tempLat = res.latitude > 0 ? res.latitude : lat.value;
      let tempLng = res.longitude > 0 ? res.longitude : lon.value;
      let cityName = "成都";
      try {
        cityName = res.result.address_component.city;
      } catch (error) {
        cityName = "成都";
      }

      lat.value = tempLat;
      lon.value = tempLng;
      uni.setStorageSync(
        UserTip.USER_LOCATION_DATA,
        JSON.stringify({
          longitude: tempLng,
          latitude: tempLat,
        })
      );
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: tempLat,
          longitude: tempLng,
        },
        coord_type: 5,
        success: (res: any) => {
          if (res.status === 0) {
            getCurrCityData(cityName);
            loadData();
          }
        },
      });
    },
    fail: (error) => {},
  });
}
let userDatas: UserEntityData[] = [];
/**
 * 加载数据
 */
async function loadData() {
  clearCheckGridState();
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  loadOtherCountData();
  let teampCurRegionData = isCountyAccount.value
    ? {
        id: currAccountCountyId,
        region_name: "全部",
      }
    : currRegion.value;

  let tempRegionDataList = [];
  let filterList = tempRegionDataList.filter((data) => {
    return data.id === -1;
  });
  if (!isCountyAccount.value && filterList.length === 0) {
    tempRegionDataList.push({
      id: -1,
      region_name: "全部",
    });
  }
  let results = (await regionList()) as RegionListData[];

  tempRegionDataList.push(...results);
  let singleRegionDatas = tempRegionDataList.filter((data) => {
    return teampCurRegionData?.id !== -1
      ? teampCurRegionData?.id === data.id
      : true;
  });
  if (isCountyAccount.value) {
    currRegion.value = singleRegionDatas[0];
  }
  regionDataList.value = isCountyAccount.value
    ? [currRegion.value]
    : (tempRegionDataList as []);
  allRegionPolygons.value = await getAllPolygonsData(singleRegionDatas);
  polygons.value = allRegionPolygons.value;
  getMapMarkes(teampCurRegionData.id === -1, teampCurRegionData.id);
  if (currRegion.value.id !== -1) {
    currRegionCount.value = (await regionCount(
      currRegion.value.id
    )) as RegionCountData;
    showGridStatistic.value = true;
  } else {
    showGridStatistic.value = false;
  }
}
function clearCheckGridState() {
  showCheckGrids.value = currRegion.value.id !== -1;
  checkGrids.value = false;
}
async function getMapMarkes(isAll: boolean, region_id?: number) {
  if (isAll) {
    userDatas = (await allUserEntityList()) as UserEntityData[];
  } else {
    userDatas = (await regionUserEntityList(region_id)) as UserEntityData[];
  }

  let temp = userDatas.map((data) => {
    let { lat, lng } = bMapTransqqMap(
      data.latest_location?.longitude,
      data.latest_location?.latitude
    ) as { lat: number; lng: number };
    data.user.loactionData = {
      latitude: lat,
      longitude: lng,
    };
    let iconPath =
      data.latest_location?.is_online == 0
        ? "../../static/icon/ic_user_offline.jpg"
        : "../../static/icon/ic_user_online.jpg";
    return {
      id: data.user?.id,
      latitude: lat,
      longitude: lng,
      title: data?.user?.full_name,
      iconPath: iconPath,
      width: 26,
      height: 34,
      userData: data.user,
      joinCluster: true,
    };
  });
  markers.value = temp as [];
}
//获取当前城市数据
async function getCurrCityData(city: string) {
  let results = (await getCitys()) as CityData[];

  currCity.value = results.filter((item) => item.city_name?.includes(city))[0];
  saveUserCityCode(currCity.value.id);
}

//整改销账 保障工作 网格列表点击事件
const clickItem = (type: ButtonType) => {
  if (type == ButtonType.ModifyWriteOff) {
    uni.navigateTo({
      url: "/subpackages/personnel-grid/modify/modify",
    });
    return;
  }
  if (type == ButtonType.ProtectionWork) {
    uni.navigateTo({
      url: "/subpackages/personnel-grid/safeguards/safeguards",
    });
    return;
  }
  if (type == ButtonType.GridList) {
    uni.navigateTo({
      url: "/subpackages/personnel-grid/grid-list/list",
    });
    return;
  }
  uni.showToast({
    title: type,
    duration: 2000,
  });
};
const jumpOrbitPage = () => {
  jumpOrbitData();
};
async function jumpOrbitData() {
  let data = userData.value;
  // console.log("data: ", data);

  let teampUserList = [];
  teampUserList.push(data);
  let { latitude, longitude } = data.loactionData as {
    latitude: number;
    longitude: number;
  };
  let ptInPolyData = await getPtInPoly(latitude, longitude, polygons.value);
  let polygonsJson = JSON.stringify(ptInPolyData.points as any[]);
  let userJosn = JSON.stringify(teampUserList);
  jumpOrbit(userJosn, data.id, polygonsJson);
}
enum ButtonType {
  ModifyWriteOff = "整改销账", //整改销账
  ProtectionWork = "保障工作", //保障工作
  GridList = "网格列表", //网格列表
}
</script>

<style lang="less">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

.mapTopContainer {
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  box-sizing: border-box;
  margin-top: 18px;
  margin-left: 16px;

  text {
    height: 40px;
    width: 78px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    background-color: white;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    color: #737373;
  }
}

.userDilogContainer {
  background-color: white;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 15px;
  padding-bottom: 24px;

  .userName {
    margin-top: 10px;
    color: #1b1b1b;
    font-size: 18px;
    font-weight: bold;
  }

  .phoneNumber {
    color: #333;
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
  }

  .bottomButtonContainer {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
  }
}
</style>
